<template>
  <div class="set">
    <li @click="showPopup"><van-icon name="setting-o" /> 设置</li>
    <!-- 设置 -->
    <van-popup
      v-model="show"
      closeable
      position="bottom"
      :style="{ height: '100%' }"
    >
      <p class="my_set_title">设置</p>
      <!-- 头像部分 -->
      <div class="my_set_head">
        <van-uploader :after-read="afterRead"
          ><img :src="avatar"
        /></van-uploader>
        <p>点击更换头像</p>
      </div>
      <!-- 列表部分 -->
      <div class="my_set_list">
        <!-- <van-form @submit="onSubmit"> -->
        <van-form @submit="onSubmit">
          <van-field
            v-model="username"
            name="userName"
            label="用户名"
            :placeholder="userName"
          />
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
              >确定更改</van-button
            >
          </div>
        </van-form>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { uploadImageFunc, getFunc } from "@/http/request.js";
import { Dialog } from "vant";
let formData = null;
export default {
  data() {
    return {
      show: false,
      username: "",
    };
  },
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  computed: {
    userName() {
      return this.$store.state.user.userName;
    },
    id() {
      return this.$store.state.user.id;
    },
    avatar() {
      return this.$store.state.user.avatar;
    },
  },

  methods: {
    // 触发input:file的change事件 (整合表单的数据)
    afterRead(content) {
      // 此时可以自行将文件上传至服务器(承载表单信息的对象)
      formData = new FormData();
      formData.append("photo", content.file); //头像图片
      formData.append("fileType", "IMAGE");
      formData.append("id", this.id);
      this.submitFunc();
      //       formData.append("token", localStorage.getItem('token'));
    }, // 点击修改头像图片
    submitFunc() {
      // 使用axios上传图片
      uploadImageFunc(formData).then((data) => {
        // console.log(data); // 后端反馈的信息
        if (data.code == 200) {
          Dialog.alert({
            message: data.msg,
          });

          this.$store.dispatch("user/setAvatarAsync", data.avatar); // 重置表单
          this.fileList = [];
        } else {
          Dialog.alert({
            title: "更换状态",
            message: data.msg,
          });
        }
      });
    },
    onSubmit(values) {
      // console.log("submit", values, values.userName);
      this.initName(this.id, values.userName);
    },
    async initName(id, userName) {
      // 请求服务器更换用户名信息
      await getFunc(`/user/update?id=${id}&userName=${userName}`).then(
        (data) => {
          if (data) {
            // console.log(data);
            Dialog.alert({
              message: data.msg,
            });
            this.$store.dispatch("user/setUserNameAsync", userName);
          } else {
            Dialog.alert({
              message: data.msg,
            });
          }
        }
      );
    },
    showPopup() {
      this.show = true;
    },
  },
};
</script>

<style lang='scss' scoped>
@import "@/static/common/base.scss";
.my_set_title {
  text-align: center;
  height: 15vw;
  line-height: 15vw;
  font-size: 5.5vw;
  background-color: #eee;
}
// 设置头像
.my_set_head {
  margin: 0 auto;
  width: 50vw;
  height: 50vw;
  margin-top: 5vw;
  img {
    width: 50v;
    height: 50vw;
    border-radius: 50%;
  }
  p {
    text-align: center;
    color: $bgc;
  }
}
.my_set_list {
  margin-top: 10vw;
}
</style>